<template>
  <el-table-column 
    :prop="columnHead.prop||''" 
    :label="columnHead.label" 
    :width="columnHead.width||''" 
    :min-width="columnHead.minWidth || ''" 
    :header-align="columnHead.headAlign || ''" 
    :show-overflow-tooltip="columnHead.showOverflowTooltip === false ? false : true"
    :align="columnHead.align || 'center'">
    <table-column  
      v-if="columnHead.children && columnHead.children.length > 0" 
      v-for='(item,index) in columnHead.children' 
      :key="index" 
      :columnHead='item'>
    </table-column>
    <template slot-scope="scope"> 
      <div v-if="!columnHead.text" class="tooltips">
        <span :style="rowStyle" @click="columnHead.onClickFn?columnHead.onClickFn(scope.row):()=>{}" v-if='!columnHead.textFn'>{{scope.row[columnHead.prop]}}</span>
        <span :style="rowStyle" @click="columnHead.onClickFn?columnHead.onClickFn(scope.row):()=>{}" v-else>{{columnHead.textFn(scope.row)}}</span>
      </div>
      <div v-else class="tooltips">
        <span :style="rowStyle" @click="columnHead.onClickFn?columnHead.onClickFn(scope.row):()=>{}">{{columnHead.text}}</span>
      </div>
    </template>
  </el-table-column>
</template>
<script>
export default {
  name: "tableColumn",
  props: {
    columnHead: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      rowStyle: ''
    }
  },
  created() {
    this.spanStyle()
  },
  methods: {
    spanStyle() {
      // 属性名请使用驼峰命名法
      let str = ``
      if (this.columnHead.cssAttr){
        let data = {...this.columnHead.cssAttr}
        for(let k in data){
          let attrName = k.split(/(?=[A-Z])/g)
          let curAttr;
          if (attrName.length>1){
            curAttr = `${attrName.join('-').toLowerCase()}:${data[k]};`
          }else{
            curAttr = `${k}:${data[k]};`
          }
          str += curAttr
        }
      }
      this.rowStyle = str
    }
  }
}
</script>
<style lang="scss">
.el-table{
  .el-tooltip{
    .tooltips {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>